<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model="username"><br><br>
            密码：<input type="password" v-model="password"><br><br>
            年龄：<input type="number" v-model.number="age"><br><br>
            性别：
                男<input type="radio" name="gender" v-model="gender" value="1">
                女<input type="radio" name="gender" v-model="gender" value="2"><br><br>
            爱好：
                学习<input type="checkbox" v-model="habby" value="xuexi">
                打游戏<input type="checkbox" v-model="habby" value="dayouxi">
                吃饭<input type="checkbox" v-model="habby" value="chifan"><br><br>
            所属校区
                <select v-model="city">
                    <option>请选择校区</option>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="sz">深圳</option>
                    <option value="zz">郑州</option>
                </select><br><br>
            其他信息:<textarea v-model="intro"></textarea><br><br>
            <input type="checkbox" v-model="agree">同意并接受<a href="javascript::">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip=false;
        Vue.config.devtools = true;
        new Vue({
            el:'#app',
            data:{
                username:'',
                password:'',
                age:'',
                gender:1,
                habby:[],
                city:'',
                intro:'',
                agree:false
            },
            methods:{
                demo(){
                    console.log(this._data)
                }
            }
        })
    </script>
</body>
</html>